<template>
  <div class="viewmap">
    <div id="map" class="cen-top map" />
  </div>
</template>

<script>
import mapJson from './js/guangxi'
import mapColors from './js/mapColors'

export default {
  name: 'TopMiddleMap',
  props: {
    depCode: {
      type: String
    }
  },
  data() {
    return {
      DEP_CODE: '450000',
      DEP_NAME: '广西壮族自治区',
      depName: '',
      mapFeatures: [],
      res: [],
      echartsMap: null,
      seeAll: require('@/assets/img/icons/default.png')
    }
  },
  mounted() {
    /* 获取地图数据*/
    this.mapFeatures = mapJson[this.DEP_CODE].features
    this.mapFeatures.forEach((element) => {
      this.res.push({
        name: element.properties.name, //名称
        value: element.properties.cp //坐标
      })
    })
    this.initEchartsMap()
  },
  methods: {
    initEchartsMap() {
      const _this = this
      //根据depCode获取区划名称
      this.mapFeatures.forEach((element) => {
        if (this.depCode == this.DEP_CODE) {
          this.depName = this.DEP_NAME
        } else if (element.id == this.depCode) {
          this.depName = element.properties.name
        }
      })
      let option = {
        title: {
          text: this.depName,
          left: 'center',
          top: '10px',
          textStyle: {
            color: '#fff',
            fontSize: 22
          }
        },
        tooltip: {
          trigger: 'item',
          formatter: '{b}'
        },
        toolbox: {
          top: '10px',
          right: '30px',
          show: true,
          itemSize: 30,
          feature: {
            myToolHome: {
              show: true,
              title: '重置',
              icon: 'image://' + _this.seeAll,
              onclick: function () {
                _this.initEchartsMap()
                _this.$emit('mapChoose', _this.DEP_CODE)
              }
            }
          }
        },
        geo: {
          // 地图配置
          show: true,
          map: 'GX',
          aspectScale: 1.1625,
          center: [108.245, 23.75],
          zoom: 1.05,
          regions: mapColors, //全透明
          itemStyle: {
            normal: {
              areaColor: 'rgba(0, 255, 0, 0)',
              borderColor: 'rgba(0, 255, 0, 0)',
              shadowOffsetX: -2,
              shadowOffsetY: 2,
              shadowBlur: 1
            }
          }
        },
        series: [
          {
            type: 'map',
            map: 'GX',
            aspectScale: 1.1625,
            center: [108.245, 23.75],
            zoom: 1.05,
            // geoIndex: 0, //***使用geo坐标系，但不知道什么原因导致点击标签失效
            roam: false, // 是否开启鼠标缩放和平移漫游
            itemStyle: {
              normal: {
                areaColor: 'rgba(0, 255, 0, 0)',
                borderColor: 'rgba(0, 255, 0, 0)',
                shadowOffsetX: -2,
                shadowOffsetY: 2,
                shadowBlur: 1
              }
            },
            emphasis: {
              //高亮的显示设置
              label: {
                color: '#fff'
              },
              itemStyle: {
                areaColor: '#FCC708'
              }
            },
            select: {
              //选中显示设置
              label: {
                color: '#fff'
              },
              itemStyle: {
                areaColor: '#FCC708'
              }
            },
            data: [
              { name: this.depName, selected: true } // selected:true 默认选中
            ],
            zlevel: 0 // 所属图形的 zlevel 值
          },
          {
            // 设置为分散点
            name: '区域名',
            type: 'scatter',
            // series坐标系类型
            coordinateSystem: 'geo',
            // 设置图形 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
            symbol: 'roundRect',
            // //标记的大小，可以设置成诸如 10 这样单一的数字，也可以用数组分开表示宽和高，例如 [20, 10] 表示标记宽为20，高为10
            symbolSize: [55, 30],
            // 气泡字体设置
            label: {
              normal: {
                show: true, // 是否显示
                textStyle: {
                  color: '#fff', // 字体颜色
                  fontSize: 14 // 字体大小
                },
                // 返回气泡数据
                formatter(value) {
                  // return value.data.value[2]
                  return value.data.name
                }
              }
            },
            itemStyle: {
              normal: {
                color: '#333333' // 标志颜色
              }
            },
            // 给区域赋值
            data: this.res,
            zlevel: 1 // 所属图形的 zlevel 值
          }
        ]
      }

      // 基于准备好的dom，初始化echarts实例
      this.echartsMap = this.$echarts.init(
        document.getElementById('map'),
        null,
        { renderer: 'svg' }
      )

      this.$echarts.registerMap('GX', mapJson[this.DEP_CODE])
      this.echartsMap.setOption(option, true)
      window.addEventListener('resize', () => this.echartsMap.resize(), false)
      //点击事件
      this.echartsMap.on('click', (param) => {
        //通过名字获取code
        this.mapFeatures.forEach((element) => {
          if (element.properties.name == param.name) {
            console.log('city code:', element.id)
            this.depCode = element.id
          }
        })
        this.$emit('mapChoose', this.depCode)
      })
    }
  },
  watch: {
    depCode: {
      handler: function (newValue, oldValue) {
        this.initEchartsMap()
      }
    }
  }
}
</script>

<style lang='scss'>
.viewmap {
  position: relative;
  //width: 1180px;
  //height: 720px;
  width: 88%;
  height: 88%;
  margin: auto;

  .cen-top {
    z-index: 1;
    //width: 1080px;
    //height: 720px;
    width: 100%;
    height: 100%;
    background: url('~@/assets/img/map-bg2.png') center center no-repeat;
    //background-size: 100% auto; //大小大家自己根据需要调整
    background-size: 100% auto; //大小大家自己根据需要调整
    .map {
      position: relative;
    }
  }
}
</style>
